<template>
	<div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
    <scroll :topArea="44" ref="repairList" @pullingDown="onpullingDown" @pullingUp="onpullingUp" :data="lst">
      <div class="repair-wrapper">
        <div class="detail-area" v-for="i in lst" :key="i.id">
          <div class="detail-head">
              <div>订单编号：{{i.orderNumber}}</div>
              <div>下单日期：{{i.time}}</div>
          </div>
          <div class="detail-content">
               <div class="img-area">
                   <img :src="i.image" alt="图片">
               </div>
               <div class="content-area">
                   <div class="title">{{i.goodsName}}</div>
                   <div class="price">价值： ￥{{(i.price/100).toFixed(2)}}</div>
                   <div class="sku">
                       <div class="sku-item" v-for="c in i.standard" :key="c.id">{{c.name}}</div>
                   </div>
               </div>
           </div>
           <div class="operation-area">
               <div @click="goRepairDetail(i)">申请维修</div>
           </div>
        </div>
      </div>
      
    </scroll>
  </div>
</template>

<script>
import {getRepairList} from "@/api/homepage.js"
export default {
  name: 'repairList',
  data: function(){
    return {
      headers: {
        title: "维修申请列表"
      },
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      lst: [],
    }
  },
  components: {
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    onpullingDown: function(){
      this.repairList();
    },
    onpullingUp: function(){
      if(this.hasMore){
        this.loadMore();
      }else {
        this.$refs.repairList.forceUpdate();
        return
      }
    },
    repairList: function(){
      let self = this;
      this.pageNum = 1;
      getRepairList(this.pageNum).then( data => {
        if(data.code == 200){
          if(data.data && data.data.list.length < this.pageSize){
            this.hasMore = false;
          }else {
            this.hasMore = true;
          }
          let tempData = data.data.list;
          tempData.forEach(function(item){
            let tempVal = new Date(item.createTime);
            // var temHour = tempVal.getHours() > 9 ? tempVal.getHours() : ('0' + tempVal.getHours());
            item.time = tempVal.getFullYear() + '-' + (tempVal.getMonth()+1) + "-" + tempVal.getDate();
            item.image = self.imgUrlService + item.image;
          });
          this.lst = tempData;
        }else {
          this.hasMore = false;
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.repairList.forceUpdate();
        }
      })
    },
    loadMore: function(){
      let self = this;
      this.pageNum ++;
      getRepairList(this.pageNum).then( data => {
        if(data.code == 200){
          if(data.data && data.data.list.length < this.pageSize){
            this.hasMore = false;
          }else {
            this.hasMore = true;
          }
          let tempData = data.data.list;
          tempData.forEach(function(item){
            let tempVal = new Date(item.createTime);
            // var temHour = tempVal.getHours() > 9 ? tempVal.getHours() : ('0' + tempVal.getHours());
            item.time = tempVal.getFullYear() + '-' + (tempVal.getMonth()+1) + "-" + tempVal.getDate();
            item.image = self.imgUrlService + item.image;
          });
          this.lst = this.lst.concat(tempData);
        }else {
          this.hasMore = false;
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.$refs.repairList.forceUpdate();
        }
      })
    },
    goRepairDetail: function(i){
      if(i){
        localStorage.repairGoods = JSON.stringify(i);
      }
      this.$router.push({name: "repairDetail"});
    }
  },
  mounted: function(){
    this.repairList();
  },
}
</script>
<style lang="scss" scoped>
.outer {
  height: 100%;
  width: 100%;
  position: absolute;
}

</style>